<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 26.66667vw;
        }

        /* iphone6效果图测量：宽度 100px 高度 200px */
        #box {
            /* 1rem==100px=>html根节点fontsize 100px */
            width: 1rem;
            height: 2rem;
            background: lightsalmon;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<!-- 
    iphone 6 : 375
    iphone 6 plus : 414

    vw:原理是把页面分成100等份，一份就是1vw
    iphone 6 : 375  1vw==3.75
    iphone 6 plus : 414 1vw==4.14

    iphone 6 :得到100px==26.6667vw
 -->

</html>